<template>
    <div class="aaa">
        <div class="bbb flex flex-col p-4 size-full">
            <div class="text-xs text-gray">{{ title }}：</div>

            <div class="flex flex-col h-full justify-around">
                <div class="text-center">
                    <slot name="question"></slot>
                </div>

                <div class="flex-center">
                    <slot name="answer"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    defineProps<{
        title: string
    }>()
</script>

<style scoped lang="scss">
    .ccc {
        position: absolute;
        width: 100vw;
        height: 100vh;
    }
    .bbb {
        backdrop-filter: blur(20px);
        transition: all 1s;
        // background-color: rgba(255, 255, 255, 0.47);
    }
    .bbb:hover {
        backdrop-filter: blur(0px);
    }
</style>
